<template>
  <v-chart class="chart" :option="option" />
</template>

<script>
import { defineComponent } from "vue";

import VChart from "vue-echarts";

import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import { TitleComponent, GridComponent } from "echarts/components";

// import { random as randomUtils } from "@/utils";

use([CanvasRenderer, LineChart, TitleComponent, GridComponent]);

// function random() {
//   return randomUtils(100, 200);
// }

export default defineComponent({
  name: "LineChart",
  components: {
    VChart,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    titleColor: {
      type: String,
      default: "#ffc916",
    },
  },
  data() {
    return {
      option: this.getOption(),
    };
  },
  methods: {
    getOption() {
      return {
        title: {
          text: this.title,
          textStyle: {
            fontSize: "14px",
            fontWeight: 400,
            fontFamily: "cn",
            color: this.titleColor,
          },
        },
        xAxis: {
          type: "category",
          data: ["00", "01", "02", "03", "04", "05", "06", "07", "08"],
          axisLine: false,
          axisTick: {
            show: true,
            alignWithLabel: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.2)",
            },
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.8)",
          },
        },
        yAxis: {
          type: "value",
          axisLine: false,
          axisLabel: false,
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: [
              // random(),
              // random(),
              // random(),
              // random(),
              // random(),
              // random(),
              // random(),
              // random(),
              // random(),
            ],
            type: "line",
            symbol: "none",
            lineStyle: {
              width: 1,
              color: "#ffc916",
            },
          },
        ],
        grid: {
          top: 40,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true,
        },
      };
    },
  },
});
</script>

<style></style>
